<template>
  <view class="settings-container">
    <!-- 设置列表 -->
    <view class="settings-list">
      <!-- 主题设置 -->
      <view class="settings-section">
        <view class="section-title">主题设置</view>
        
        <!-- 主题颜色 -->
        <view class="settings-item">
          <view class="item-label">主题颜色</view>
          <view class="color-picker">
            <view 
              v-for="(color, index) in themeColors" 
              :key="index"
              class="color-item"
              :class="{ active: currentTheme.primaryColor === color }"
              :style="{ backgroundColor: color }"
              @click="changeThemeColor(color)"
            ></view>
          </view>
        </view>
        
        <!-- 暗黑模式 -->
        <view class="settings-item">
          <view class="item-label">暗黑模式</view>
          <switch 
            :checked="currentTheme.darkMode" 
            @change="toggleDarkMode"
            color="#FF69B4"
          />
        </view>
      </view>
      
      <!-- 通知设置 -->
      <view class="settings-section">
        <view class="section-title">通知设置</view>
        
        <view class="settings-item">
          <view class="item-label">新消息通知</view>
          <switch 
            :checked="notifications.message" 
            @change="toggleNotification('message')"
            color="#FF69B4"
          />
        </view>
        
        <view class="settings-item">
          <view class="item-label">点赞通知</view>
          <switch 
            :checked="notifications.like" 
            @change="toggleNotification('like')"
            color="#FF69B4"
          />
        </view>
        
        <view class="settings-item">
          <view class="item-label">评论通知</view>
          <switch 
            :checked="notifications.comment" 
            @change="toggleNotification('comment')"
            color="#FF69B4"
          />
        </view>
        
        <view class="settings-item">
          <view class="item-label">系统通知</view>
          <switch 
            :checked="notifications.system" 
            @change="toggleNotification('system')"
            color="#FF69B4"
          />
        </view>
      </view>
      
      <!-- 隐私设置 -->
      <view class="settings-section">
        <view class="section-title">隐私设置</view>
        
        <view class="settings-item">
          <view class="item-label">允许他人查看我的作品</view>
          <switch 
            :checked="privacy.viewWorks" 
            @change="togglePrivacy('viewWorks')"
            color="#FF69B4"
          />
        </view>
        
        <view class="settings-item">
          <view class="item-label">允许他人评论我的作品</view>
          <switch 
            :checked="privacy.allowComment" 
            @change="togglePrivacy('allowComment')"
            color="#FF69B4"
          />
        </view>
      </view>
      
      <!-- 缓存管理 -->
      <view class="settings-section">
        <view class="section-title">缓存管理</view>
        
        <view class="settings-item">
          <view class="item-info">
            <view class="item-label">缓存大小</view>
            <view class="item-value">{{cacheSize}}</view>
          </view>
          <button class="btn btn-text" @click="clearCache">清除缓存</button>
        </view>
      </view>
      
      <!-- 关于 -->
      <view class="settings-section">
        <view class="section-title">关于</view>
        
        <view class="settings-item" @click="goToPage('about')">
          <view class="item-label">关于我们</view>
          <view class="item-right">
            <text class="iconfont icon-right"></text>
          </view>
        </view>
        
        <view class="settings-item" @click="goToPage('privacy')">
          <view class="item-label">隐私政策</view>
          <view class="item-right">
            <text class="iconfont icon-right"></text>
          </view>
        </view>
        
        <view class="settings-item" @click="goToPage('terms')">
          <view class="item-label">用户协议</view>
          <view class="item-right">
            <text class="iconfont icon-right"></text>
          </view>
        </view>
        
        <view class="settings-item">
          <view class="item-info">
            <view class="item-label">当前版本</view>
            <view class="item-value">{{appVersion}}</view>
          </view>
          <button class="btn btn-text" @click="checkUpdate">检查更新</button>
        </view>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="btn btn-danger btn-block" @click="handleLogout">退出登录</button>
    </view>
  </view>
</template>

<script>
import store from '@/store/index.js';

export default {
  data() {
    return {
      // 主题颜色选项
      themeColors: [
        '#FF69B4', // 粉红色（默认）
        '#409EFF', // 蓝色
        '#67C23A', // 绿色
        '#E6A23C', // 黄色
        '#F56C6C', // 红色
        '#909399', // 灰色
        '#8A2BE2', // 紫色
        '#FF4500'  // 橙色
      ],
      
      // 当前主题
      currentTheme: {
        primaryColor: '#FF69B4',
        darkMode: false
      },
      
      // 通知设置
      notifications: {
        message: true,
        like: true,
        comment: true,
        system: true
      },
      
      // 隐私设置
      privacy: {
        viewWorks: true,
        allowComment: true
      },
      
      // 缓存大小
      cacheSize: '0MB',
      
      // 应用版本
      appVersion: '1.0.0'
    };
  },
  
  onLoad() {
    // 加载当前主题
    this.loadTheme();
    
    // 加载通知设置
    this.loadNotificationSettings();
    
    // 加载隐私设置
    this.loadPrivacySettings();
    
    // 获取缓存大小
    this.getCacheSize();
    
    // 获取应用版本
    this.getAppVersion();
  },
  
  methods: {
    /**
     * 加载当前主题
     */
    loadTheme() {
      this.currentTheme = {
        primaryColor: store.state.theme.primaryColor,
        darkMode: store.state.theme.darkMode
      };
    },
    
    /**
     * 更改主题颜色
     * @param {string} color - 颜色值
     */
    changeThemeColor(color) {
      this.currentTheme.primaryColor = color;
      
      // 更新全局主题
      store.setTheme({
        primaryColor: color
      });
      
      // 显示提示
      uni.showToast({
        title: '主题颜色已更新',
        icon: 'none'
      });
    },
    
    /**
     * 切换暗黑模式
     * @param {Object} event - 事件对象
     */
    toggleDarkMode(event) {
      const darkMode = event.detail.value;
      this.currentTheme.darkMode = darkMode;
      
      // 更新全局主题
      store.setTheme({
        darkMode
      });
      
      // 显示提示
      uni.showToast({
        title: darkMode ? '已开启暗黑模式' : '已关闭暗黑模式',
        icon: 'none'
      });
    },
    
    /**
     * 加载通知设置
     */
    loadNotificationSettings() {
      const settings = uni.getStorageSync('notificationSettings');
      if (settings) {
        try {
          this.notifications = JSON.parse(settings);
        } catch (e) {
          console.error('解析通知设置失败', e);
        }
      }
    },
    
    /**
     * 切换通知设置
     * @param {string} type - 通知类型
     * @param {Object} event - 事件对象
     */
    toggleNotification(type, event) {
      this.notifications[type] = event.detail.value;
      
      // 保存设置
      uni.setStorageSync('notificationSettings', JSON.stringify(this.notifications));
    },
    
    /**
     * 加载隐私设置
     */
    loadPrivacySettings() {
      const settings = uni.getStorageSync('privacySettings');
      if (settings) {
        try {
          this.privacy = JSON.parse(settings);
        } catch (e) {
          console.error('解析隐私设置失败', e);
        }
      }
    },
    
    /**
     * 切换隐私设置
     * @param {string} type - 隐私类型
     * @param {Object} event - 事件对象
     */
    togglePrivacy(type, event) {
      this.privacy[type] = event.detail.value;
      
      // 保存设置
      uni.setStorageSync('privacySettings', JSON.stringify(this.privacy));
    },
    
    /**
     * 获取缓存大小
     */
    getCacheSize() {
      // 这里只是模拟，实际需要调用平台API获取
      setTimeout(() => {
        this.cacheSize = '12.5MB';
      }, 500);
    },
    
    /**
     * 清除缓存
     */
    clearCache() {
      uni.showModal({
        title: '清除缓存',
        content: '确定要清除所有缓存吗？',
        success: (res) => {
          if (res.confirm) {
            // 显示加载中
            uni.showLoading({
              title: '清除中...'
            });
            
            // 模拟清除过程
            setTimeout(() => {
              uni.hideLoading();
              
              // 更新缓存大小
              this.cacheSize = '0MB';
              
              // 显示提示
              uni.showToast({
                title: '缓存已清除',
                icon: 'success'
              });
            }, 1500);
          }
        }
      });
    },
    
    /**
     * 获取应用版本
     */
    getAppVersion() {
      // 实际项目中需要从平台API获取
      // 这里只是模拟
      this.appVersion = '1.0.0';
    },
    
    /**
     * 检查更新
     */
    checkUpdate() {
      uni.showLoading({
        title: '检查中...'
      });
      
      // 模拟检查过程
      setTimeout(() => {
        uni.hideLoading();
        
        uni.showModal({
          title: '检查更新',
          content: '当前已是最新版本',
          showCancel: false
        });
      }, 1500);
    },
    
    /**
     * 跳转到页面
     * @param {string} page - 页面名称
     */
    goToPage(page) {
      const pageMap = {
        about: '/pages/about/about',
        privacy: '/pages/privacy/privacy',
        terms: '/pages/terms/terms'
      };
      
      const url = pageMap[page];
      if (url) {
        uni.navigateTo({
          url
        });
      }
    },
    
    /**
     * 处理退出登录
     */
    handleLogout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 调用退出登录方法
            store.logout();
          }
        }
      });
    }
  }
};
</script>

<style lang="scss">
@import '@/static/styles/global.scss';

.settings-container {
  min-height: 100vh;
  background-color: $background-color;
  padding-bottom: 40rpx;
}

.settings-list {
  padding: 20rpx;
}

.settings-section {
  background-color: #FFFFFF;
  border-radius: $border-radius-medium;
  margin-bottom: 30rpx;
  overflow: hidden;
  box-shadow: $box-shadow-light;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  padding: 30rpx;
  border-bottom: 1rpx solid $border-color;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid $border-color;
  
  &:last-child {
    border-bottom: none;
  }
}

.item-label {
  font-size: 28rpx;
  color: $text-color-primary;
}

.item-info {
  display: flex;
  flex-direction: column;
  
  .item-value {
    font-size: 24rpx;
    color: $text-color-secondary;
    margin-top: 6rpx;
  }
}

.item-right {
  color: $text-color-secondary;
  font-size: 24rpx;
}

.color-picker {
  display: flex;
  flex-wrap: wrap;
  
  .color-item {
    width: 60rpx;
    height: 60rpx;
    border-radius: $border-radius-circle;
    margin-left: 20rpx;
    border: 2rpx solid transparent;
    position: relative;
    
    &.active {
      border-color: #FFFFFF;
      box-shadow: 0 0 0 2rpx $primary-color;
      
      &::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 20rpx;
        height: 20rpx;
        border-radius: $border-radius-circle;
        background-color: #FFFFFF;
      }
    }
  }
}

.logout-section {
  padding: 20rpx;
  
  .btn-danger {
    background-color: $danger-color;
  }
}
</style>
